cssborder阴影（css设置边框阴影）

使用box-shadow属性语法box-shadow: h-shadow v-shadow blur spread color inset;注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。值说明h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影的大小color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表inset可选。从外层的阴影（开始时）改变阴影内侧阴影

1、首先新建一个html文件，命名为test.html，使用div标签创建一个模块，用于测试。如下图所示。

2、在test.html文件内，给div添加一个class属性，属性值设置为myway。

3、然后在css标签内，通过class设置div的样式，定义它的宽度为200px，高度为200px，背景颜色为黑色。

4、接着在css标签内，再使用box-shadow属性设置div的阴影效果，其中，左边阴影为绿色，顶部阴影为蓝色，底部阴影为红色，右边阴影为黄色。

5、最后在浏览器打开test.html文件，查看实现的效果，如下图所示就完成了。

1、实践代码：

《html》《head》《meta

可以用CSS3的阴影属性。 不过要支持IE6的话，加载个 .htc 行为文件就好了。border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px;background: #EEFF99;behavior: url(/PIE.htc)。\x0d\x0a直接使用box-shadow:5px 5px 10px black inset;属性设置样式样式就可以了。前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。\x0d\x0a这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。

需要准备的材料分别有：电脑、浏览器、html器。

1、首先，打开html器，新建html文件，例如：index.html。

2、在index.html中的《style》标签中，输入css代码：

div{width: 250px;height: 100px;border: 5px solid blue;box-shadow: 0px 20px 20px -20px #5E5E5E;}

3、浏览器运行index.html页面，此时只有div底部的边有阴影效果。

我们在制作网页的时候可以用CSS3添加边框，那么如果要给边框添加阴影该怎么做呢？下面我给大家分享一下。

SublimeText

首先打开Sublime Text软件，新建一个HTML文档，如下图所示

然后在html文档的Body区域插入一个div，如下图所示

接下来给div定义一些样式，注意其中的box-shadow就是定义边框阴影的，如下图所示

最后我们运行界面程序，你会看到边框已经被添加上阴影了，如下图所示

border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px;background: #EEFF99;behavior: url(/PIE.htc);这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。《title》盒子阴影的CSS实现方法《/title》《style》.baseBlock{width:220px;position:relative;}.baseBlockIn{padding:10px 15px;background:#a0b3d6;box-shadow:10px 10px 5px #444;-moz-box-shadow:10px 10px 5px #444;-webkit-box-shadow:10px 10px 5px #444;position:relative;z-index:1;}.ieShadow{_width:215px;_height:160px;filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=6);-ms-filter:“progid:DXImageTransform.Microsoft.Blur(pixelradius=6)“;background-color:#444\9;position:absolute;left:5px;top:5px;right:-5px;bottom:-5px;}《/style》《div class=“baseBlock“》《div class=“baseBlockIn“》

设置边框阴影不会影响盒子的布局，即不会影响其兄弟元素的布局spread可以与blur、h-shadow、v-shadow相互抵消，blur不可为负值可以设置多重边框阴影，实现更好的效果，增强立体感。by三人行慕课

设置边框透明度：

                    border: 1pxsolidtransparent;

                    border-color: rgba(151, 151, 151, 0.3);前三个为边框颜色的rgb值，最后一个为透明度。

设置阴影透明度：box-shadow: 0px 2px 10px rgba(41, 12, 127, 0.2);

《title》css怎么给4个边框添加阴影《/title》

《style type=“text/css“》

span{        box-shadow: 2px 4px 6px #000;        }        《/style》

《/head》    《body》        《span》百度知道“css怎么给4个边框添加阴影”《/span》    《/body》

简单的解释一下相关的代码属性

box-shadow: 2px 4px 6px #000

首先2px :  表示水平阴影的位置，然后4px : 表示垂直阴影的位置，接着5px : 表示模糊距离，最后#000 ： 表示阴影的颜色（#000  黑色）

拓展资料：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

参考资料：百度百科-CSS